<script src="../../../api/smart/gntest.js"></script>
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>产品列表</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table v-loading="loading" :data="productList" >
              <el-table-column label="" align="center" prop="id" />
              <el-table-column label="产品编码" align="center" prop="code" />
              <el-table-column label="产品型号" align="center" prop="model" />
              <el-table-column label="产品名称" align="center" prop="name" />
              <el-table-column label="库存状态" align="center" prop="inventoryState" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.smart_inventory_state" :value="scope.row.inventoryState"/>
                </template>
              </el-table-column>
              <el-table-column label="检验状态" align="center" prop="tastState" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.smart_test_state" :value="scope.row.tastState"/>
                </template>
              </el-table-column>
              <el-table-column label="故障状态" align="center" prop="faultState" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.smart_fault_state" :value="scope.row.faultState"/>
                </template>
              </el-table-column>
              <el-table-column label="创建日期" align="center" prop="createDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>Order List</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table v-loading="loading" :data="orderList" >
              <el-table-column label="开关ID" align="center" prop="switch id" />
              <el-table-column label="雷管" align="center" prop="cap" />
              <el-table-column label="平均电流（mA）" align="center" prop="The average current" />
              <el-table-column label="平均电压（V）" align="center" prop="The average voltage" />
              <el-table-column label="最高电流（mA）" align="center" prop="The highest current" />
              <el-table-column label="最高电压（V）" align="center" prop="The highest voltage" />
              <el-table-column label="级联电流（mA）" align="center" prop="The Cascade current " />
              <el-table-column label="测试结果" align="center" prop="Result" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>电流波形</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="currentWaveform" style="height: 210px" />
          </div>
        </el-card>
        <el-card>
          <div slot="header">
            <span>电压波形</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="voltageWaveform" style="height: 210px" />
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import { listHT, boardMtrHT, boardGdfHT } from "@/api/smart/gycheck";

export default {
  name: "index",
  dicts: ['smart_fault_state', 'smart_test_state', 'smart_inventory_state'],
  data() {
    return {
      // 电流波形
      currentWaveform: null,
      // 电压波形
      voltageWaveform: null,
      //波形数据
      boardGdfHT: {},
      // 产品表格数据
      productList: [],
      // orderlist数据
      orderList: [],
      queryParams: {
        type: 'glp',
        productId: '',
        pageSize: 3,
        pageNum: 1
      }
    };
  },
  created() {
    this.getListHT();
    this.getBoardMtrHT();
    this.getBoardGdfHT();
    // this.openLoading();
  },
  methods: {
    /** 查缓存询信息 */
    getBoardGdfHT() {
      boardGdfHT(this.queryParams).then(response => {
          this.boardGdfHT = response.data;

          this.$nextTick(() => {
            this.currentWaveform = echarts.init(this.$refs.currentWaveform);
            this.currentWaveform.setOption({
              xAxis: {
                type: 'category',
                data: this.boardGdfHT['x_axis']
              },
              yAxis: {
                type: 'value',
                name: '单位：mA'
              },
              series: [
                {
                  data: this.boardGdfHT['c_data'],
                  type: 'line',
                  smooth: true
                }
              ],
              grid:{
                left: '5%',
                right:'5%',
                top:'18%',
                bottom: '15%'
              }
            });
            this.voltageWaveform = echarts.init(this.$refs.voltageWaveform, "macarons");
            this.voltageWaveform.setOption({
              xAxis: {
                type: 'category',
                data: this.boardGdfHT['x_axis']
              },
              yAxis: {
                type: 'value',
                name: '单位：V'
              },
              series: [
                {
                  data: this.boardGdfHT['v_data'],
                  type: 'line',
                  smooth: true,

                }
              ],
              grid:{
                left: '5%',
                right:'5%',
                top:'18%',
                bottom: '15%'
              }
            });
          });
        });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载缓存监控数据，请稍候！");
    },
    /** 查询产品列表 */
    getListHT() {
      // this.loading = true;
      listHT(this.queryParams).then(response => {
        this.productList = response.rows;
        /*if(this.productList.length > 3){
          this.productList = this.productList.slice(0,3);
        }*/
        // this.loading = false;
      });
    },

    /** 查询orderlist列表 */
    getBoardMtrHT() {
      // this.loading = true;
      boardMtrHT(this.queryParams).then(response => {
        this.orderList = response.data;
        if(this.orderList.length > 3){
          this.orderList = this.orderList.slice(0,3);
        }
        // this.loading = false;
      });
    }
  },
};
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #F7F7F7;
  }
  .bg-purple {
    background: #F7F7F7;
  }
  .bg-purple-light {
    background:	#F7F7F7;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color:	#F7F7F7;
  }

</style>
